<template>
	<view>
		<!-- 登录页 -->
		<!-- <view :style="'height:calc(30px + ' + statusBarHeight + 'px)'"></view> -->
		<view>
			
			<view class="WechatImg positionRel">
				<view class="" style="width: 100%;height: 35vh;"></view>
				<view class="positionAbs" style="top: 50%;left: 50%;transform: translate(-36%, -20%);width: 100%;">
					<view class="c-fff ftwt fts30" style="text-align: left;">
						<view>贵阳市</view>
						<view>移动源排污监控平台</view>
					</view>
				</view>
			</view>
			
			<view class="" style="margin: 0 60rpx;">
				<view class="backFFF pad15 bor_radius8 mab30" style="box-shadow: rgb(0 0 0 / 10%) 1px 1px 5px 1px;">
					<view class="fts14 c-000opacity25">用户名</view>
					<view class="input_style">
						<!-- <image src="@/static/login/account_icon.png" mode="" style="width: 48rpx;height: 52rpx;margin: 0 18rpx;"></image> -->
						<u--input border="none" v-model="account" placeholder='请输入用户名' @focus='accountFocus=true'></u--input>
						<view class="pad10" @click.native="clearKey('account')" v-if="account && accountFocus">
							<u-icon name="close-circle-fill" color="#c6c7cb" size="22"></u-icon>
						</view>
					</view>
					<view class="fts14 c-000opacity25">密码</view>
					<view class="input_style">
						<!-- <image src="@/static/login/password_icon.png" mode="" style="width: 52rpx;height: 52rpx;margin: 0 18rpx;"></image> -->
						<u--input :type='passwordType' border="none" v-model="password" placeholder='请输入密码' @focus='passwordFocus=true'></u--input>
						<view class="pad10" @click.stop="clearKey('password')" v-if="password && passwordFocus">
							<u-icon name="close-circle-fill" color="#c6c7cb" size="22"></u-icon>
						</view>
					</view>
				</view>
				<view v-if="false" class="c-000 mat15 mab20 mal15 fts12 display">
					<u-checkbox-group v-model="checkboxValue1" @change="checkboxChange1">
						<u-checkbox name="checkedPass" inactiveColor="#e9e9e9" label="记住密码" labelSize='14' iconSize='16'
							labelColor="#8c8c8c">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class=" ">
					<button class="Btn1 mab15" type="button" @click="accountlogin">登录</button>
					<button class="Btn2" type="button" @click="loginSet">设置</button>
				</view>
			</view>
			
			<view class="wid100 mat20 fts12 display justify-center" style="position: fixed;bottom:20px;left:50%;transform: translate(-50%,50%);">
				<!-- <view class="c-000opacity65">深圳市安车检测股份有限公司</view> -->
			</view>
			
		</view>
		
		<!-- 无法授权提示 -->
		<u-modal :show="empowerShow" title="提示" :closeOnClickOverlay="true" confirmText='知道了' @confirm="empowerShow=false" width="600rpx">
			<view class="slot-content">
				<view class="text-center">{{empowerContent}}</view>	
			</view>
		</u-modal>
		
	</view>
</template>

<script>
	const {
		globalData: {
			statusBarHeight
		}
	} = getApp()
	export default {
		data() {
			return {
				requestUrl:'http://'+uni.getStorageSync("IPNumber")+':'+uni.getStorageSync("portNumber") +'/vepts/api/v1/guiyang',
				wxAppName:'黔东南移动源排放管理系统',
				passwordType: 'password', // 密码框类型
				
				statusBarHeight,
				imgPrefix: this.$config.imgPrefix, // 图片前缀
				checked: false, // 是否勾选协议
				checkedPass: false, // 是否勾选记住密码
				checkboxValue1:[], 
				account:"admin",
				password:"test",
				// account:"",
				// password:"",
				tsno:"",
				jkxlh:"",
				accountFocus:false, // 账号框焦点
				passwordFocus:false, // 密码框焦点
				
				empowerShow:false, // 无法授权提示弹窗
				empowerContent:"集团账号无法授权，请切换至站点账号后重试", // 无法授权提示内容
				
			};
		},

		onShow() {
			if(uni.getStorageSync('tsno')){ //检测站编号
				this.tsno=uni.getStorageSync('tsno')
			}
			if(uni.getStorageSync('jkxlh')){ //接口序列号
				this.jkxlh=uni.getStorageSync('jkxlh')
			}
			this.requestUrl='http://'+uni.getStorageSync("IPNumber")+':'+uni.getStorageSync("portNumber") +'/vepts/api/v1/guiyang'
		},
		onLoad() {
			console.log(uni.getStorageSync('checkedPass'));
			this.checkboxValue1=uni.getStorageSync('checkedPass')?['checkedPass']:[]
			this.checkedPass=uni.getStorageSync('checkedPass') || false
			if(uni.getStorageSync('checkedPass')){ // 勾选了记住密码
				this.account=uni.getStorageSync('accountNumber') || ''
				this.password=uni.getStorageSync('passwordNumber') || ''
			}
		},
		methods: {
			clearKey(item){ // 清空输入框
				console.log(item);
				this[item]=''
			},
			checkboxChange1(e) {
				console.log(e);
				this.checkedPass = e.length > 0 ? true : false
				console.log(this.checkedPass);
			},
			
			loginSet(){ // 去登录前设置
				uni.navigateTo({
					url: '/pages/login/loginSet'
				})
			},

			// -------------------- 接口请求
			accountlogin() { // 账密登录
				// if(!this.account || !this.password){
				// 	uni.showToast({
				// 		title: '请先填写账号跟密码!',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if(!this.$all.checkPhone(this.account)) return // 手机号格式校验
				// if(!this.$all.checkPassword(this.password)) return // 密码格式校验
				if(!this.tsno || !this.jkxlh){
					this.$all.toast('请先配置登录设置')
					return
				} 
				
				let params = {
					loginname: this.account,
					password: this.password,
					tsno: this.tsno, // 检测站编号
					jkxlh: this.jkxlh, // 接口序列号
				}
				this.$ajax.myRequest({
					url: this.requestUrl + '/yhdllogin',
					data: params,
					method: 'POST',
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/index/index'
								})
								uni.setStorageSync('loginName', this.account); // 缓存登录用户名
								uni.setStorageSync('accessToken', res.data.token); // 缓存登录用户名
							},1000)
							this.loginAfter() // 登录成功后操作
						}
						this.$all.toast(res.data.msg || '请求失败')
					}
				});
				
			},

			loginAfter() { // 登录后操作
				// uni.setStorageSync('access_token', data.accessToken);
				// let expiresIn = new Date().getTime() + data.expiresIn * 1000
				// uni.setStorageSync('expiresIn', expiresIn); // 处理token过期时间
				
				// uni.setStorageSync('loginInfo', data || ''); // 缓存账号登录信息
				uni.setStorageSync('checkedPass', this.checkedPass);
				if(this.checkedPass){ // 勾选了记住密码
					uni.setStorageSync('accountNumber', this.account);
					uni.setStorageSync('passwordNumber', this.password);
				}
			},
			
		}
	};
</script>
<style lang="scss">
	/* pages/login/login.wxss */

	/* 标题栏 */
	page{
		background-image: url('@/static/backImage/back1.png');
		background-color: #fff;
	}
	.WechatImg {
		text-align: center;
	}
	
	.input_style{
		// width: 610rpx;
		height: 88rpx;
		// background: #EAECF2;
		border-radius: 8rpx;
		margin: auto;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		border-bottom: 1px solid #f2f2f2;
	}
</style>